<template>

  <div class="app-container">



    <el-form label-width="120px">

      <el-form-item label="新闻标题">
        <el-input v-model="Info.title" placeholder=" 示例：机器学习项目课：从基础到搭建项目视频课程。专业名称注意大小写"/>
      </el-form-item>

      <el-form-item label="所属类别">
<!--        <el-input v-model="Info.kind" placeholder=" 示例：娱乐"/>-->
        <el-select v-model="Info.kind" placeholder="请选择" >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>


      <el-form-item label="内容">
        <quill-editor ref="text" v-model="Info.content" class="myQuillEditor" :options="editorOption" />
      </el-form-item>



      <br><br>

      <el-form-item>
        <el-button :disabled="saveBtnDisabled" type="primary" @click="addArticle1">保存</el-button>
      </el-form-item>
    </el-form>



  </div>
</template>
<script>
import { quillEditor } from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import article from '@/api/article/article'
export default {
  components: {
    quillEditor
  },
  data() {
    return {
      editorOption: {},
      saveBtnDisabled:false,
        Info:{
          title: '',
          kind: '',
          content: '',
          sort: 0,
          is_delete: 0
      },
      options: [{
        value: '推荐',
        label: '推荐'
      }, {
        value: '热点',
        label: '热点'
      }, {
        value: '创新',
        label: '创新'
      },
        {
          value: '科技',
          label: '科技'
        },
        {
          value: '娱乐',
          label: '娱乐'
        },
        {
          value: '体育',
          label: '体育'
        },
        {
          value: '时尚',
          label: '时尚'
        },
      ],
    }
  },
  created() {

  },
  methods:{
    addArticle1() {

      article.addArticle(this.Info)
        .then(response=>{
          this.$message({
            type: 'success',
            message: '添加新闻成功!'
          });
          this.$router.push({path:'/article/test'})
        })
    }
  }
}
</script>
<style scoped>
.tinymce-container {
  line-height: 29px;
}
.myQuillEditor {
  height: 400px;
}

</style>
